[Day7] StyleSheet！工程師也要學化妝 (下篇)！

11th鐵人賽

DaYuan

團隊溫泉泡起來♨️

2019-09-23 20:22:09

2619 瀏覽

分享至

來美化我們的畫面吧

朋友：[可是我不知道要怎麼做啊？]

[只需要設定樣式表與加上元件的Props(控制項)就可以打造出你像要的樣子了！]

可是要如何知道元件有什麼能用的Props?

沒錯，請養成看文件的習慣，以 Button 為例

為什麼新增的TODO沒有放按鈕還可以刪除呢?

因為...真相永遠只有一個，但是按鈕可不只有一種！


<TouchableOpacity onPress={this.onCilck}>
  <View style={styles.sectionContainer}>
///  <View style={{width:width*0.6,height:30,borderRadius:30,backgroundColor:"#55aaFF",alignItems:"center",justifyContent:"center"}}>
    <Text style={{color:"#FFF"}}>
    我是TouchableOpacity</Text>
    </View>
  </View>
</TouchableOpacity>

這兩者都是button
按鈕本質是可以被點擊的事件觸發器

  <Button
    title="新增一筆資料"
    onPress={() => {
      let keyArray = this.state.data;
      keyArray.push({ "text": this.state.inputAddr });
      this.setState({ data: keyArray });
    }}
  />

/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  Dimensions,
  Button,
} from 'react-native';
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
type Props = {};

export default class BookRead extends Component<Props> {
  constructor(props) {
    super(props);
    this.indexHistory = [0];
    this.state = {
      index: 0,
      reading: 0,
      inputAddr: ",",
      data: [{ 'text': 'A' }, { 'text': 'B' }, { 'text': 'C' }, { 'text': 'D' }, { 'text': 'E' }],
    };
  }
  onCilck = () => {
    let index = 1;
    let keyArrayin = [];
    let keyArrayout = [];
    keyArrayin = this.state.data;
    keyArrayin.splice(index, 1);
    console.warn(keyArrayin);
    this.setState({ data: keyArrayin })
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <ScrollView
            style={styles.container}>
            <View style={styles.topContainer}>
              <Text style={styles.topText}>TODO list</Text>
            </View>
            <View style={styles.inputContainer}>
              <TextInput
                placeholder="輸入ＴＯＤＯ"
                style={{ flex: 1, fontSize: 30, alignItems: "center", borderColor: 'gray', borderWidth: 1 }}
                placeholderTextColor="#959DAD"
                onChangeText={(text) => {
                  this.setState({ inputAddr: text });
                  console.warn(text);
                }}
              />
              <Button
                title="新增一筆資料"
                onPress={() => {
                  let keyArray = this.state.data;
                  keyArray.push({ "text": this.state.inputAddr });
                  this.setState({ data: keyArray });
                }}
              />
            </View>
            <View style={styles.body}>
              {this.state.data.map((note, index) => {
                // console.warn(note.keyworld);
                return (
                  <TouchableOpacity onPress={this.onCilck}>
                    <View style={styles.sectionContainer}>
                      <Text style={styles.sectionTitle}>Step ID:{index}</Text>
                      <Text style={styles.sectionDescription}>
                        data:{note.text},點我刪除
                      </Text>
                    </View>
                  </TouchableOpacity>
                );
              })}
            </View>
          </ScrollView>
        </View>

      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#a5FCFF',
  },
  topContainer: {
    flex: 1,
    marginTop: 20,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: 'red',
    paddingHorizontal: 10,
    alignItems: 'center',


  }, topText: {
    flex: 1,
    // justifyContent: 'center',
    fontSize: 40,


  },


  inputContainer: {
    flex: 1,
    marginVertical: 10,
    flexDirection: "row",
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#FCFF',
  },
  body: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#12FFa3',
  },
  Buttons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#113322',
  },
  ButtonList: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#337',
    borderColor: '#0F0',
    borderWidth: 3,
  },
  Button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#337',
    borderColor: '#a0a',
    borderWidth: 2,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    // color: Colors.black,
  },
  sectionDescription: {
    marginVertical: 8,
    fontSize: 18,
    fontWeight: '400',
    // color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  sectionContainer: {
    marginTop: 10,
    paddingHorizontal: 24,
    borderBottomWidth: 1,
    borderBottomColor: "#FaFaFa"
  },
});

呃.......這好像不太對

/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  Dimensions,
  Button,
} from 'react-native';
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
type Props = {};

export default class BookRead extends Component<Props> {
  constructor(props) {
    super(props);
    this.indexHistory = [0];
    this.state = {
      index: 0,
      reading: 0,
      inputAddr: ",",
      data: [{ 'text': 'A' }, { 'text': 'B' }, { 'text': 'C' }, { 'text': 'D' }, { 'text': 'E' }],
    };
  }
  onCilck = () => {
    let index = 1;
    let keyArrayin = [];
    keyArrayin = this.state.data;
    keyArrayin.splice(index, 1);
    console.warn(keyArrayin);
    this.setState({ data: keyArrayin })
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <ScrollView
            style={styles.container}>
            <View style={styles.topContainer}>
              <Text style={styles.topText}> TODO list</Text>
            </View>
            <View style={styles.inputContainer}>
              <TextInput
                placeholder="  輸入ＴＯＤＯ"
                style={{ flex: 1, fontSize: 30, alignItems: "center", borderColor: 'gray', borderWidth: 1,borderRadius:15, }}
                placeholderTextColor="#959DAD"
                onChangeText={(text) => {
                  this.setState({ inputAddr: text });
                  console.warn(text);
                }}
              />
              <Button
                title="新增一筆資料"
                onPress={() => {
                  let keyArray = this.state.data;
                  keyArray.push({ "text": this.state.inputAddr });
                  this.setState({ data: keyArray });
                }}
              />
            </View>
            <View style={styles.body}>
              {this.state.data.map((note, index) => {
                // console.warn(note.keyworld);
                return (
                  <TouchableOpacity onPress={this.onCilck}>
                    <View style={styles.sectionContainer}>
                      <Text style={styles.sectionTitle}>Step ID:{index}</Text>
                      <Text style={styles.sectionDescription}>
                        data:{note.text},點我刪除
                      </Text>
                    </View>
                  </TouchableOpacity>
                );
              })}
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fafafa',
  },
  topContainer: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#fafafa',
    paddingHorizontal: 10,
    alignItems: 'center',
  }, topText: {
    flex: 1,
    fontSize: 40,
  },
  inputContainer: {
    flex: 1,
    marginVertical: 10,
    marginLeft:5,
    flexDirection: "row",
  },
  body: {
    flex: 1,
    backgroundColor: '#fafafa',
  },
  Buttons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginVertical: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
  sectionContainer: {
    marginTop: 10,
    paddingHorizontal: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#a5aaaF',
  },
});